<template>
  <iForm ref="form" :model="formData" :rules="rules" class="login-form-cpn">

      <iFormItem label="账号:" prop="account" class="i-form-item">
        <iInput v-model="formData.account" pureNumFlag="true" :p-input-style="itemInputStyle"></iInput>
      </iFormItem>

    <iFormItem label="密码:" prop="pwd" class="i-form-item">
      <iInput v-model="formData.pwd" type="password" :p-input-style="itemInputStyle"></iInput>
    </iFormItem>

    <iFormItem label="验证:" prop="ver" class="i-form-item">
      <iInput ref="ver" v-model="formData.ver" type="password" :p-input-style="itemInputStyle" :pTySate="iInputState"
              @mBlur="mVer"></iInput>
      <Verification @verCodeReady="mGetVercode"
        class="verification"></Verification>
    </iFormItem>

      <button @click="handleSubmit" class="i-from-item-btn">登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录</button>
  </iForm>
</template>

<script>

  // 导入公共组件
  import iForm from 'components/common/form/IForm'
  import iFormItem from 'components/common/form/IFormItem'
  import iInput from 'components/common/input/ordInput/IInput'
  import Verification from "components/common/verification/Verification";

  // 导入网络请求组件
  import {login} from "network/noVer";

  export default {
    name: "LoginForm",
    data () {
      return {
        verCode: '', // 从验证码组件发来的真正验证码
        verCodeVer: false,

        iInputState: 9,
        itemInputStyle: { //input样式
          height: '32px',
          width: '200px',
        },
        formData: {
          account: '',
          pwd: '',
          ver: '',
        },
        rules: {
          account: [
            { required: true, message: '不能为空', trigger: 'blur'}
          ],
          pwd: [
            {required: true, message: '非法,不可输入空!!!', trigger: 'blur'},
          ],
          ver: [
            {required: false}
          ]

        }
      }
    },
    components: {
      iForm,
      iFormItem,
      iInput,
      Verification,
    },
    methods: {
      /**点击submit提交*/
      handleSubmit() {
        this.$refs.form.validate((valid) => {
          if (valid && this.verCodeVer)  {
            this.mLogin(this.formData.account, this.formData.pwd)
          }
          else {
            this.$err_ty_toast.toShow('校验失败！！！', 2000)
          }
        })
      },

      /**向store中添加token*/
      mSetToken (token) {
        this.$store.dispatch('aSetToken', token)
          .then(res => {
            // console.log(res);
          })
      },

      /**发送axios登录请求*/
      mLogin (account, password) {
        login(account, password)
          .then(res => {
            if (res.code === 200) {
              // console.log('token:'+res.token);
              this.mSetToken(res.token)

              this.$router.push('/index')
            } else if (res.code === 401) {
              console.log('account or password is error');
              // 使用吐司
              this.$wran_ty_toast.toShow('账号或密码不正确', 2000)
            }
          })
        .catch(err => {
          console.log('<登录>网络请求函数问题' + err);
        })
      },

      /**接收验证码*/
      mGetVercode (verCode) {
        // console.log(verCode);
        this.verCode = verCode
      },

      /**验证码验证函数*/
      mVer () {
        if (this.verCode === this.formData.ver) {
          this.$succ_ty_toast.toShow('验证成功', 2000)
          this.verCodeVer = true

          this.iInputState = 0 // 表示正常

        } else {
          this.$err_ty_toast.toShow('验证码错误！！！', 2000)
          this.verCodeVer = false

          this.iInputState = 2 // 表示错误
        }
      }


    }
  }
</script>

<style scoped>
  .login-form-cpn {

    width: 100%;
    height: 92%;

    /*background-color: green;*/
  }
  .i-form-item {
    position: relative;
    right: -25%;
    top: 15%;

    margin-bottom: 7%;

    height: 9%;
    width: 100%;

    font-size: 18px;

  }
  .i-from-item-btn {
    position: absolute;
    left: 50%;
    top: 80%;
    transform: translate(-50%, -80%);
    height: 35px;
    width: 250px;
    background-color: red;
    border: none;
    outline: none;

    color: #ffffff;
    font-size: 18px;

  }
  .i-from-item-btn:hover {
    cursor: pointer; /*放上变手指*/
    opacity: 0.7;
  }
  .verification {
    position: absolute;
    left: 16%;
    top: 110%;

  }
</style>